<!DOCTYPE html>
<html>
<head>
    <title>学生信息查询</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>学生信息查询</h2>
<form id="addStudentForm">
    <label>姓名：<input type="text" name="name"></label>
    <label>学号：<input type="text" name="number"></label>
    <input type="submit" value="添加">
</form>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>学号</th>
        <th>操作</th>
        <th>修改</th>
    </tr>
    </thead>
    <tbody id="studentTable">
    </tbody>
</table>

<button type="button" id="addStudentModalButton">添加学生</button>

<!-- 添加学生模态框 -->
<div id="addStudentModal" style="display: none;">
    <h2>添加学生信息</h2>
    <form id="addStudentFormModal">
        <label>姓名：<input type="text" name="addName"></label>
        <label>学号：<input type="text" name="addNumber"></label>
        <input type="submit" value="保存">
        <input type="button" value="取消" onclick="closeAddStudentModal()">
    </form>
</div>

<!-- 模态框 -->
<div id="editStudentModal" class="modal" style="display:none">
    <div class="modal-content">
        <h2>修改学生信息</h2>
        <form id="editStudentFormModal">
            <label>姓名：<input type="text" name="editName"></label>
            <label>学号：<input type="text" name="editNumber"></label>
            <input type="submit" value="保存">
            <input type="button" value="取消" onclick="closeEditStudentModal()">
        </form>
    </div>
</div>

<script>
    // 查询学生信息
    function queryStudents() {
        $.ajax({
            url: "/api/students",
            type: "GET",
            dataType: "json",
            success: function(data) {
                if (data) {
                    var studentTable = $("#studentTable");
                    studentTable.empty();
                    $.each(data, function(index, student) {
                        var deleteButton = "<button type='button' onclick='deleteStudent(" + student.id + ")'>删除</button>";
                        var editButton = "<button type='button' onclick='editStudent(" + student.id + ")'>修改</button>";
                        studentTable.append("<tr><td>" + student.id + "</td><td>" + student.name + "</td><td>" + student.number + "</td><td>" + deleteButton + "</td><td>" + editButton + "</td></tr>");
                    });
                }
            },
            error: function(xhr, status, error) {
                alert("查询学生信息失败：" + error);
            }
        });
    }

    // 添加学生信息
    $("#addStudentForm").submit(function(event) {
        event.preventDefault();
        var name = $("input[name='name']").val();
        var number = $("input[name='number']").val();
        $.ajax({
            url: "/api/students",
            type: "POST",
            dataType: "json",
            data: JSON.stringify({"name": name, "number": number}),
            contentType: "application/json",
            success: function() {
                alert("添加学生信息成功");
                queryStudents();
                $("#addStudentForm")[0].reset();
            },
            error: function(xhr, status, error) {
                alert("添加学生信息失败：" + error);
            }
        });
    });

    // 删除学生信息
    function deleteStudent(id) {
        $.ajax({
            url: "/api/students/" + id,
            type: "DELETE",
            dataType: "json",
            success: function() {
                alert("删除学生信息成功");
                queryStudents();
            },
            error: function(xhr, status, error) {
                alert("删除学生信息失败：" + error);
            }
        });
    }

    $(function() {
        queryStudents();
    });

    //--------------------------------------------
    // 显示添加学生模态框
    $("#addStudentModalButton").click(function() {
        $("#addStudentModal").show();
    });

    // 隐藏添加学生模态框
    function closeAddStudentModal() {
        $("#addStudentModal").css("display", "none");
        $("#addStudentForm")[0].reset();
    }

    // 添加学生信息（模态框）
    $("#addStudentFormModal").submit(function(event) {
        event.preventDefault();
        var name = $("input[name='addName']").val();
        var number = $("input[name='addNumber']").val();
        $.ajax({
            url: "/api/students",
            type: "POST",
            dataType: "json",
            data: JSON.stringify({"name": name, "number": number}),
            contentType: "application/json",
            success: function() {
                alert("添加学生信息成功");
                queryStudents();
                $("#addStudentFormModal")[0].reset();
                $("#addStudentModal").hide();
            },
            error: function(xhr, status, error) {
                alert("添加学生信息失败：" + error);
            }
        });
    });
    //--------------------------------------------
    // 显示模态框并填充表单
    // 显示修改学生模态框
    function editStudent(id) {
        // 弹出模态框
        $("#editStudentModal").show();

        // 根据ID查询学生信息
        $.ajax({
            url: "/api/students/" + id,
            type: "GET",
            dataType: "json",
            success: function(data) {
                if (data) {
                    // 填充表单数据
                    $("input[name='editName']").val(data.name);
                    $("input[name='editNumber']").val(data.number);
                    // 提交修改表单
                    $("#editStudentFormModal").submit(function(event) {
                        event.preventDefault();
                        var name = $("input[name='editName']").val();
                        var number = $("input[name='editNumber']").val();
                        $.ajax({
                            url: "/api/students/" + id,
                            type: "PUT",
                            dataType: "json",
                            data: JSON.stringify({"name": name, "number": number}),
                            contentType: "application/json",
                            success: function() {
                                alert("修改学生信息成功");
                                queryStudents();
                                closeEditStudentModal();
                            },
                            error: function(xhr, status, error) {
                                alert("修改学生信息失败：" + error);
                            }
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                alert("查询学生信息失败：" + error);
            }
        });
    }

    // 隐藏修改学生模态框
    function closeEditStudentModal() {
        $("#editStudentFormModal")[0].reset();
        $("#editStudentModal").css("display", "none");

    }


    //--------------------------------------------
</script>
</body>
</html>